<template>
  <div class="favorite-manage-container">
    <h1>收藏管理</h1>
    
    <div class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索收藏的商品名称、分类或属性..." 
        @input="handleSearch"
      />
      <button class="search-button">
        <i class="icon-search"></i>
      </button>
    </div>
    
    <div class="filter-buttons">
      <button @click="filterByCategory('all')" :class="{ active: currentFilter === 'all' }">全部</button>
      <button @click="filterByCategory('服装')" :class="{ active: currentFilter === '服装' }">服装</button>
      <button @click="filterByCategory('电子')" :class="{ active: currentFilter === '电子' }">电子</button>
      <button @click="filterByCategory('家电')" :class="{ active: currentFilter === '家电' }">家电</button>
      <button @click="filterByCategory('配饰')" :class="{ active: currentFilter === '配饰' }">配饰</button>
      <button @click="filterByCategory('鞋类')" :class="{ active: currentFilter === '鞋类' }">鞋类</button>
    </div>
    
    <div v-if="filteredFavorites.length === 0" class="empty-message">
      没有找到匹配的收藏商品
    </div>
    
    <div v-else class="favorites-grid">
      <div v-for="(product, index) in paginatedFavorites" :key="product.code" class="product-card">
        <div class="product-image">
          <img src="/src/assets/img/image.png" :alt="product.name">
        </div>
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p class="product-category">{{ product.category }} | {{ product.attribute }}</p>
          <p class="product-price">¥{{ product.price }}</p>
        </div>
        <div class="product-actions">
          <button @click="removeFromFavorite(index)" class="action-button remove-btn">
            <i class="icon-heart"></i> 取消收藏
          </button>
          <button @click="addToCart(product)" class="action-button buy-btn">
            <i class="icon-cart"></i> 购买
          </button>
        </div>
      </div>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FavoriteManage',
  data() {
    return {
      favorites: [],
      currentPage: 1,
      itemsPerPage: 8,
      currentFilter: 'all',
      searchQuery: '',
      // 使用统一的图片路径
      productImage: '/src/assets/img/image.png'
    };
  },
  created() {
    // 从本地存储获取收藏数据
    this.loadFavorites();
  },
  computed: {
    filteredFavorites() {
      let result = this.favorites;
      
      // 应用分类筛选
      if (this.currentFilter !== 'all') {
        result = result.filter(item => item.category === this.currentFilter);
      }
      
      // 应用搜索筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(item => 
          item.name.toLowerCase().includes(query) || 
          item.category.toLowerCase().includes(query) || 
          (item.attribute && item.attribute.toLowerCase().includes(query))
        );
      }
      
      return result;
    },
    paginatedFavorites() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredFavorites.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredFavorites.length / this.itemsPerPage);
    }
  },
  methods: {
    loadFavorites() {
      this.favorites = JSON.parse(localStorage.getItem('favorites')) || [];
      
      // 如果没有收藏数据，添加一些示例数据
      if (this.favorites.length === 0) {
        this.favorites = [
          { code: '001', name: '男士休闲衬衫', attribute: 'L码/蓝色', category: '服装', price: '129.00' },
          { code: '005', name: '智能手表', attribute: '黑色/防水', category: '配饰', price: '899.00' },
          { code: '008', name: '平板电脑', attribute: '64GB/银色', category: '电子', price: '2599.00' }
        ];
        localStorage.setItem('favorites', JSON.stringify(this.favorites));
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    filterByCategory(category) {
      this.currentFilter = category;
      this.currentPage = 1; // 重置到第一页
    },
    handleSearch() {
      this.currentPage = 1; // 搜索时重置到第一页
    },
    removeFromFavorite(index) {
      const actualIndex = this.favorites.findIndex(item => item.code === this.paginatedFavorites[index].code);
      if (actualIndex !== -1) {
        this.favorites.splice(actualIndex, 1);
        localStorage.setItem('favorites', JSON.stringify(this.favorites));
        
        // 如果当前页没有数据了，且不是第一页，则返回上一页
        if (this.paginatedFavorites.length === 0 && this.currentPage > 1) {
          this.currentPage--;
        }
      }
    },
    addToCart(product) {
      // 获取现有购物车
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      // 检查是否已在购物车
      const existingItem = cart.find(item => item.code === product.code);
      if (existingItem) {
        existingItem.quantity = (existingItem.quantity || 1) + 1;
      } else {
        cart.push({...product, quantity: 1});
      }
      localStorage.setItem('cart', JSON.stringify(cart));
      alert('已添加到购物车');
    }
  }
}
</script>

<style scoped>
.favorite-manage-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  max-width: 600px;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 12px 20px;
  padding-right: 50px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 2px 10px rgba(74,144,226,0.2);
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 10px;
}

.icon-search:before {
  content: "🔍";
}

.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.filter-buttons button {
  margin: 0 8px 10px;
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-buttons button:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.filter-buttons button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.empty-message {
  margin: 50px 0;
  font-size: 20px;
  color: #888;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: white;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.product-image {
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 15px;
  text-align: left;
  flex-grow: 1;
}

.product-info h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #333;
}

.product-category {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.product-price {
  font-weight: bold;
  color: #e53935;
  font-size: 18px;
  margin: 8px 0 0;
}

.product-actions {
  display: flex;
  padding: 10px;
  background-color: #f9f9f9;
}

.action-button {
  flex: 1;
  padding: 8px 0;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button i {
  margin-right: 5px;
}

.remove-btn {
  background-color: #f5f5f5;
  color: #666;
}

.remove-btn:hover {
  background-color: #e0e0e0;
  color: #333;
}

.buy-btn {
  background-color: #4a90e2;
  color: white;
}

.buy-btn:hover {
  background-color: #357ab8;
}

.icon-heart:before {
  content: "♥";
}

.icon-cart:before {
  content: "🛒";
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.pagination button {
  margin: 0 5px;
  width: 36px;
  height: 36px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination button:hover {
  background-color: #e0e0e0;
}

.pagination button.active {
  background-color: #4a90e2;
  color: white;
}

@media (max-width: 768px) {
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .filter-buttons button {
    padding: 8px 15px;
    margin: 0 5px 8px;
  }
}

@media (max-width: 480px) {
  .favorites-grid {
    grid-template-columns: 1fr;
  }
}
</style>